<div [ngSwitch]="action">
  <div *ngSwitchCase="modes.ACTIVE_CHANGE">
    <cmdb-active-badge [activeStatus]="changes['old']"></cmdb-active-badge>
    <i class="fas fa-arrow-right"></i>
    <cmdb-active-badge [activeStatus]="changes['new']"></cmdb-active-badge>
  </div>
  <div *ngSwitchCase="modes.CREATE">
    -
  </div>
  <div *ngSwitchCase="modes.EDIT">
    <ul class="list-unstyled">
      <li *ngFor="let change of changes?.old; let i = index">
        <b>{{change?.name}}</b><br />
        <ng-template [ngIf]="change?.value && change?.value.$date" [ngIfElse]="templateUsualOld">
            {{change?.value.$date | date:"dd/MM/yyyy"}}
        </ng-template>
        <ng-template #templateUsualOld>
            {{change?.value}} 
        </ng-template>
        <i class="fas fa-arrow-right"></i> 
        <ng-template [ngIf]="changes?.new[i].value && changes?.new[i].value.$date" [ngIfElse]="templateUsualNew">
            {{changes?.new[i]?.value.$date | date:"dd/MM/yyyy"}}
        </ng-template>
        <ng-template #templateUsualNew>
            {{changes?.new[i]?.value}}
        </ng-template>
      </li>
    </ul>
  </div>
  <div *ngSwitchDefault>
    Unknown action
  </div>
</div>
